<template>
  <div class="home">
    <div class="echarts" id="line"></div>
    <div class="echarts" id="bar"></div>
    <div class="echarts" id="pie1"></div>
    <div class="echarts" id="pie2"></div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      arr: "cate/arr"
    })
  },
  mounted() {
    this.reqArr().then(() => {
      this.doline();
      this.dobar();
      this.dopie1();
      this.dopie2();
    });
  },
  methods: {
    ...mapActions({
      reqArr: "cate/reqArr"
    }),
    doline() {
      let myChart = echarts.init(document.getElementById("line"));
      let option = {
        title: {
          text: "分类子类数据",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: this.arr.map(item => item.catename)
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.arr.map(item =>
              item.children ? item.children.length : 0
            ),
            type: "line"
          }
        ]
      };
      myChart.setOption(option);
    },
    dobar() {
      let myChart = echarts.init(document.getElementById("bar"));
      let option = {
        title: {
          text: "分类子类数据",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: this.arr.map(item => item.catename)
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.arr.map(item =>
              item.children ? item.children.length : 0
            ),
            type: "bar"
          }
        ]
      };
      myChart.setOption(option);
    },
    dopie1() {
      let myChart = echarts.init(document.getElementById("pie1"));
      let option = {
        title: {
          text: "分类子类数据",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: this.arr.map((item) => ({
              value: item.children ? item.children.length : 0,
              name: item.catename
            }))
          }
        ]
      };
      myChart.setOption(option);
    },
    dopie2() {
      let myChart = echarts.init(document.getElementById("pie2"));
      let option = {
        title: {
          text: "分类子类数据"
        },
        legend: {
          top: "bottom"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [30, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8
            },
            data: this.arr.map((item) => ({
              value: item.children ? item.children.length : 0,
              name: item.catename
            }))
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped lang='less'>
@import "../../less/index.less";
.home {
  overflow: hidden;
  .echarts {
    float: left;
    width: 48%;
    height: 310px;
    margin: 10px;
    background-color: #ccc;
  }
}
</style>